<template>
  <div class="thumbnail-list-demo">
    <h2>缩略图列表示例</h2>

    <!-- 示例1：基本用法 -->
    <section class="demo-section">
      <h3>基本用法</h3>
      <!-- 基本用法 -->
      <ThumbnailList

          :items="[
            { id: 1, src: 'https://picsum.photos/300/200?random=1', title: 'Nature' },
            { id: 2, src: 'https://picsum.photos/300/200?random=2', title: 'City' }
          ]"
          thumbnail-width="250"
          item-key="id"
          @click="handleClick"
      />
    </section>

    <!-- 示例2：自定义尺寸和间距 -->
    <section class="demo-section">
      <h3>自定义尺寸和间距</h3>
      <ThumbnailList
          :items="items"
          :columns="4"
          :gutter="20"
          thumbnail-width="250"
          thumbnail-height="200"
      />
    </section>

    <!-- 示例3：选中和禁用状态 -->
    <section class="demo-section">
      <h3>选中和禁用状态</h3>
      <ThumbnailList
          :items="items"
          thumbnail-width="250"
          :selected-index="selectedIndex"
          :disabled-indexes="[0, 2]"
          @select="handleSelect"
      />
    </section>

    <!-- 示例4：懒加载和占位图 -->
    <section class="demo-section">
      <h3>懒加载和占位图</h3>
      <ThumbnailList
          :items="lazyItems"
          :gutter="20"
          thumbnail-width="250"
          loading-placeholder="/placeholder.jpg"
      />
    </section>

    <!-- 示例5：自定义插槽 -->
    <section class="demo-section">
      <h3>自定义插槽</h3>
      <ThumbnailList
          :items="items"
          :columns="3"
          :gutter="20"
          thumbnail-width="250"
      >
        <template #default="{ item }">
          <div class="custom-thumbnail">
            <img :src="item.src" :alt="item.title">
            <div class="custom-overlay">
              <h4>{{ item.title }}</h4>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </template>
      </ThumbnailList>



    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ThumbnailList from '../components/ThumbnailList/ThumbnailList.vue'

// 图片数据
const items = ref([
  {
    id: 1,
    src: 'https://picsum.photos/300/200?random=3',
    title: '自然风光',
    description: '美丽的自然景观'
  },
  {
    id: 2,
    src: 'https://picsum.photos/300/200?random=4',
    title: '城市建筑',
    description: '现代都市风貌'
  },
  {
    id: 3,
    src: 'https://picsum.photos/300/200?random=5',
    title: '生活场景',
    description: '日常生活瞬间'
  },
  {
    id: 4,
    src: 'https://picsum.photos/300/200?random=6',
    title: '艺术设计',
    description: '创意艺术作品'
  }
])

// 懒加载示例数据
const lazyItems = ref([
  {
    id: 5,
    src: 'https://picsum.photos/300/200?random=7',
    title: '懒加载图片1',
    description: '延迟加载示例'
  },
  {
    id: 6,
    src: 'https://picsum.photos/300/200?random=8',
    title: '懒加载图片2',
    description: '延迟加载示例'
  },
  {
    id: 7,
    src: 'https://picsum.photos/300/200?random=9',
    title: '懒加载图片3',
    description: '延迟加载示例'
  }
])

// 选中状态
const selectedIndex = ref(1)

// 事件处理函数
const handleClick = (event) => {
  console.log('点击缩略图:', event)
}

const handleSelect = (event) => {
  console.log('选择缩略图:', event)
  selectedIndex.value = event.index
}

const handleImageLoad = (event) => {
  console.log('图片加载成功:', event)
}

const handleImageError = (event) => {
  console.log('图片加载失败:', event)
}
</script>

<style scoped>
.thumbnail-list-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 18px;
}

/* 自定义缩略图样式 */
.custom-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.custom-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.custom-thumbnail:hover img {
  transform: scale(1.1);
}

.custom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.custom-thumbnail:hover .custom-overlay {
  transform: translateY(0);
}

.custom-overlay h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.custom-overlay p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}
</style>